<template>
  <div class="site-index positRel">
    <div class="site-content">
      <MenuLocation :title="'找场地'"></MenuLocation>
      <div class="site-list">
        <SiteCard :siteList="siteList"></SiteCard>
        <div class="page">
          <Page
            :total="total"
            :page-size="12"
            size="small"
            show-sizer
            show-total
            show-elevator
            :page-size-opts="size"
            @on-change="changeCurrent"
            @on-page-size-change="sizeChange"
          />
        </div>
      </div>
    </div>
    <Footer :top="20"></Footer>
  </div>
</template>
<script>
import MenuLocation from "@/components/myComponents/menuLocation.vue";
import SiteCard from "@/components/myComponents/siteCard.vue";
import Footer from "@/components/footer/my_footer.vue";
import { getSiteList } from "../../api/otwoo.js";
export default {
  data() {
    return {
      siteList: [],
      size: [12, 24, 36, 48],
      total: 0,
      params: {
        keyword: "",
        page: 1,
        rows: 12,
        status: 0,
      },
    };
  },
  mounted() {
    this.getSiteList();
  },
  methods: {
    changeCurrent(current) {
      this.params.page = current;
      this.getSiteList();
    },
    sizeChange(size) {
      this.params.rows = size;
      this.getSiteList();
    },
    //获取场地列表
    getSiteList() {
      getSiteList(this.params).then((res) => {
        this.siteList = res.result.rows;
        this.total = Number(res.result.total);
        this.$forceUpdate();
      });
    },
  },
  components: { MenuLocation, SiteCard, Footer },
};
</script>
<style lang="scss" scoped>
.site-index {
  display: flex;
  flex-direction: column;
  padding-bottom: 50px;
  .site-content {
    padding: 0px calc(150 / 1920 * 100vw);
    min-height: calc(100vh - (80 / 1920 * 100vw));
    flex: 1;
    .site-list {
      background: #fff;
      padding-top: calc(30 / 1920 * 100vw);
      border-radius: calc(5 / 1920 * 100vw);
      .page {
        width: 100%;
        height: calc(44 / 1920 * 100vw);
        margin-top: calc(12 / 1920 * 100vw);
        box-shadow: 0px calc(-3 / 1920 * 100vw) calc(3 / 1920 * 100vw) #c8c8c8;
        padding: 0px calc(12 / 1920 * 100vw);
        display: flex;
        align-items: center;
        .ivu-page {
          margin-left: auto;
        }
      }
    }
  }
}
</style>
